// 源插件
import React, { Fragment, PureComponent } from 'react';
import { connect } from 'dva';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
import ReactKline from 'react-kline-pro';
// 视图插件
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import {
  Layout,
  Row,
  Col,
  Card,
  Form,
  Select,
  Input,
  message,
  Menu,
  Icon,
  AutoComplete,
  Pagination,
  Divider,
  Modal,
} from 'antd';
// 外部组件
import { Document, Page } from 'react-pdf';
import pdff from './巴克莱-美股-股票策略-美股罗盘：底部临近-2019.10.31-26页.pdf';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';

// css OR less预编译器
import styles from './All.less';
// 图片

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */

@connect(({ research, loading }) => ({
  research,
  loading: loading.models.researchRule,
}))
@Form.create()
class ResearchReport extends PureComponent {
  state = {
    numPages: null,
    pageNumber: 1,
    pdf: null,
    pdfName: '',
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
  };

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  onChange(pageNumber) {
    this.setState({ pageNumber });
  }

  onChangeL() {
    this.setState({ pageNumber: this.state.pageNumber - 1 === 0 ? 1 : this.state.pageNumber - 1 });
  }

  onChangeR() {
    this.setState({
      pageNumber:
        this.state.pageNumber + 1 > this.state.numPages
          ? this.state.numPages
          : this.state.pageNumber + 1,
    });
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'research/GetReport',
      callback: res => {
        that.setState({
          dataSource: {
            title: '研报',
            code: 1,
            data: res.list,
            total: [],
            columns: [
              {
                title: 'ID',
                dataIndex: 'id',
                type: 'number',
                width: 70,
              },
              {
                title: '来源',
                dataIndex: 'path',
                type: 'string',
                filterAuto: true,
                width: 75,
              },
              {
                title: '标题',
                dataIndex: 'name',
                type: 'string',
                search: true,
                width: 250,
                render: (value, row, index) => {
                  return <a onClick={this.changePdf.bind(this, row.url, value)}>{value}</a>;
                },
              },
              {
                title: '添加时间',
                dataIndex: 'addtime',
                type: 'date',
                sorter: true,
                width: 100,
              },
            ],
          },
        });
      },
    });
  }

  changePdf(pdf, pdfName) {
    this.setState({
      pdf,
      pdfName,
      pageNumber: 1,
      Visible: true,
    });
  }

  closeVisbile() {
    this.setState({
      Visible: false,
    });
  }

  render() {
    const { pageNumber, numPages, pdf, pdfName, dataSource, Visible } = this.state;
    const widthPage = document.getElementById('cardId');
    return (
      <PageHeaderWrapper>
        <Card id="cardId">
          <StandardTablePro dataSource={dataSource} />
          <br />
          <br />
          <Modal
            destroyOnClose
            title={pdfName}
            visible={Visible}
            // confirmLoading={confirmLoading}
            width={825}
            centered
            onOk={this.closeVisbile.bind(this)}
            onCancel={this.closeVisbile.bind(this)}
            className={styles.modalPadding}
          >
            <Row>
              {/*  <Col span={2}>
                <Icon type="left" />
              </Col>
              <Col span={20}> */}
              <div style={{ textAlign: 'center', height: '100%' }}>
                <div
                  style={{ width: 350, height: '92%', position: 'absolute', zIndex: 2 }}
                  onClick={this.onChangeL.bind(this)}
                />

                <div
                  style={{ width: 350, height: '92%', position: 'absolute', right: 0, zIndex: 2 }}
                  onClick={this.onChangeR.bind(this)}
                />

                <Document file={pdf} onLoadSuccess={this.onDocumentLoadSuccess}>
                  <Page pageNumber={pageNumber} width={760} />
                </Document>
              </div>

              <br />
              {numPages === null ? null : (
                <div style={{ textAlign: 'right' }}>
                  <Pagination
                    showQuickJumper
                    pageSize={1}
                    current={pageNumber}
                    total={numPages}
                    onChange={this.onChange.bind(this)}
                    style={{ textAlign: 'right', zIndex: 100 }}
                  />
                </div>
              )}
              {/*  </Col>
              <Col span={2}>
                <Icon type="right" />
              </Col> */}
            </Row>
          </Modal>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentWillUnmount() {}
}

export default ResearchReport;
